<template>
  <div ref="ringPie" class="ringPie"></div>
</template>
<script>
import * as echarts from "echarts";
import $ from "jquery";

export default {
  props: {
    renderData: {
      type: Array,
      default: () => [],
    },
    // fontSize
    fontSize: {
      type: Number,
      default: () => 14,
    },
    num: {
      type: [Number, String],
      default: () => 0,
    },
    // 数据
    seriesData: {
      type: Array,
      default: () => [],
    },
    option: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  watch: {
    renderData: {
      deep: true,
      handler(val) {
        this.loadData();
      },
    },
  },
  mounted() {
    this.initChart();
    $(window).on("resize", this.resize);
  },
  beforeDestroy() {
    this.EC.dispose();
    $(window).off("resize", this.resize);
    delete this.EC;
    delete this.op;
  },
  methods: {
    initChart() {
      this.EC = echarts.init(this.$refs.ringPie);
      this.loadData();
    },
    loadData() {
      this.op = {
        tooltip: {
          followPointer: true,
          formatter: function (params) {
            return params.name + "：" + params.value + "项";
          },
          borderWidth: 0,
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
          backgroundColor: "rgba(24, 64, 114, 0.8)",
          axisPointer: {
            type: "shadow",
          },
        },
        graphic: [
          {
            type: "text", //控制内容为文本文字
            left: "center", //控制文本位置
            top: 120,
            style: {
              fill: "#222222", //控制字体颜色
              text: this.num + "个", //控制第一行字显示内容
              fontSize: "24px",
            },
          },
          {
            type: "text",
            left: "center",
            top: 150,
            style: {
              text: "发布总数",
              font: "Microsoft YaHei",
              fontSize: "12px",
              fill: "#666666",
            },
          },
        ],
        series: [
          {
            type: "pie",
            left: "center",
            radius: [50, 100],
            avoidLabelOverlap: false,
            clockwise: false,
            label: {
              formatter: "{b}" + " " + "{d}" + "%",
              color: "#666666",
              fontSize: 12,
              padding: [0, -60, 0, -60],
            },
            labelLine: {
              length: 20,
              length2: 70,
              lineStyle: {
                color: "#DDDDDD",
              },
            },
            labelLayout: {
              verticalAlign: "bottom",
              dy: 10,
            },
            color: [
              "#FFBE3B",
              "#FF7723",
              "#13D1AE",
              "#0EC4ED",
              "#1D8BEB",
              "#1C6FDB",
            ],
            data: this.seriesData,
          },
        ],
      };
      const option = $.extend(true, this.op, this.option);
      this.EC.setOption(this.op, true);
      this.resize();
    },
    resize() {
      this.EC.resize();
    },
  },
};
</script>
<style lang="less" scoped>
.ringPie {
  width: 100%;
  height: 270px;
}
</style>
